<template>
    <div class="introduce">
        <div class="img-header">
            <van-image
                    :src="headIcon"
            />
        </div>
        <div class="middle-video">
            <video src="http://heshuang.wanhe-phar.com/file/whzy_video.mp4"
                   poster="http://heshuang.wanhe-phar.com/file/whzy1-1.png"
                   controls
                   style="object-fit: cover"
                   id="video"
            />
        </div>
        <div class="img-end">
            <van-image
                    :src="bottomIcon"
            />
        </div>
    </div>
</template>
<script>
    import format from 'date-fns/format';
    import { Notify } from "vant";
    import https from "../https";
    export default {
        components: {
        },
        data() {
            return {
                headIcon: require('../images/shang@2x.png'),
                bottomIcon: require('../images/xia@2x.png')
            }
        },
        created() {
            document.title = '清肠剂配制与服务过程';
        },
        mounted() {
        },
        methods: {

        }
    };
</script>
<style lang="scss" scoped>
    .introduce {
        .van-image {
            font-size: 0;
        }
        .img-header {
            width: 100%;
            font-size: 0;
            img {
                width: 100%;
                vertical-align: middle;
            }
        }
        .middle-video {
            font-size: 0;
            text-align: center;
            background-color: #018CD1;
            video {
                width: 6.74rem;
                height: 3.83rem;
                border: .13rem solid #A1DFFF;
                border-radius: 10px;
            }
        }
        .img-end {
            width: 100%;
            font-size: 0;
            img {
                width: 100%;
                vertical-align: middle;
            }
        }
    }
</style>

